<template>
    <div>
        <el-alert v-if="error" type="error" :title="error" show-icon closable @close="disconnect"></el-alert>
        <!-- <el-table :data="messages" style="width: 100%">
            <el-table-column prop="type" label="消息类型" width="180"></el-table-column>
            <el-table-column prop="data" label="数据"></el-table-column>
        </el-table> -->
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { connect, close, handleSseMessage, SSEResponseType } from '../../api/Tenant/useSse';
import { ElNotification } from 'element-plus';

// 定义消息类型
interface Message {
    type: string;
    data: any;
}

// 创建一个响应式变量来存储消息
const messages = ref<Message[]>([]);

// 错误信息
const error = ref<string | null>(null);

// 定义消息回调函数
const messageCallback = (response: SSEResponseType<any>) => {
    messages.value.push({
        type: response.type,
        data: response.data,
    });
    //console.log('Received SSE message:', response);
    // 处理通知
    if(response.type === 'SSE_NOTICE'){
        showNotification(response.data);
    }

};

// 连接 SSE 服务并设置消息处理
const initializeSse = async () => {
    await connect();

    handleSseMessage(messageCallback);

    // 监听错误
    // 假设您的 SSE 模块已经在连接时处理了错误并设置了 `error`，否则可以在这里设置
};

// 关闭 SSE 服务
const disconnect = async () => {
    await close();
};

// 在组件挂载时初始化 SSE 连接
onMounted(() => {
    initializeSse();
});

// 在组件卸载时关闭 SSE 连接
onUnmounted(() => {
    disconnect();
});

const showNotification = (notification: any) => {
  
  ElNotification({
    title: notification.noticeTitle ,
    message: notification.message, // 假设通知有 message 字段
    type: 'info',
    duration: 5000,
    // 自定义更多属性
    position: 'top-right',
    showClose: true,
  });
};
</script>

<style scoped>
/* 根据需要添加样式 */
</style>